<template>
  <v-carousel
    v-if="getProductionProd"
    height="75vh"
    class="ma-4 pa-2"
    hide-delimiters
    progress="primary"
  >
    <template v-slot:prev="{ props }">
      <v-btn variant="text" @click="props.onClick">{{ getPrev }}</v-btn>
    </template>
    <template v-slot:next="{ props }">
      <v-btn variant="text" @click="props.onClick">{{ getNext }}</v-btn>
    </template>
    <v-carousel-item
      v-for="prod in getProductionProd"
      :key="prod.caption"
      transition="fade-transition"
    >
      <v-card>
        <v-row>
          <v-col cols="1"></v-col>
          <v-col cols="10">
            <v-row class="d-flex flex-column py-4">
              <h2 class="my-5">{{ prod.caption }}</h2>
              <h4 class="mb-2">{{ prod.text }}</h4>
              <v-img
                contain
                height="60vh"
                :src="`${getImgPath}${prod.img}`"
                class="mb-5"
              ></v-img>
            </v-row>
          </v-col>
          <v-col cols="1"></v-col>
        </v-row>
      </v-card>
    </v-carousel-item>
  </v-carousel>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters([
      "getProduction",
      "getProductions",
      "getNext",
      "getPrev",
      "getImgPath",
    ]),
    getProdProd() {
      return this.getProduction[0].production;
    },
    getProductionProd() {
      console.log("this.getProductions");
      console.log(this.getProduction[0]);
      return this.getProduction[0].production;
    },
  },
};
</script>

<style lang="sass">
.btnCarusel
	font-size: 14px !important
	background: #eee !important
	color: black !important
</style>